<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from "vue"
import * as echarts from "echarts";
/// 声明定义一下echart
let echart = echarts;

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  echart.dispose;
});
// 基础配置一下Echarts
function initChart() {

  let chart = echart.init(document.getElementById("myEcharts"), "dark");
  let option = {
    title: [
      {
        text: 'Tangential Polar Bar Label Position (middle)'
      }
    ],
    polar: {
      radius: [30, '80%']
    },
    angleAxis: {
      max: 4,
      startAngle: 75
    },
    radiusAxis: {
      type: 'category',
      data: ['a', 'b', 'c', 'd']
    },
    tooltip: {},
    series: {
      type: 'bar',
      data: [2, 1.2, 2.4, 3.6],
      coordinateSystem: 'polar',
      label: {
        show: true,
        position: 'middle',
        formatter: '{b}: {c}'
      }
    }
  };
  chart.setOption(option);
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}

</script>

<style lang="scss" scoped></style>
